<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-02-09 13:33:01
 * @LastEditTime: 2023-02-21 13:36:32
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\flow\flow.vue
-->
<template>
  <div class="flow">

    <el-tabs v-model="params.progressType" tab-position="top" @tab-change="tabChange()">
      <el-tab-pane label="采购单" :name="1"> </el-tab-pane>
      <el-tab-pane label="业务单" :name="2"> </el-tab-pane>
      <el-tab-pane label="生产单" :name="3"> </el-tab-pane>
    </el-tabs>
    <ul class="header-buttons">
      <li><z-button icon="add" @click="onAdd">新增{{ ['采购单', '业务单', '生产单'][params.progressType - 1] }}</z-button></li>
      <li class="dis-flex">
        <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索" clearable
          class="mr-10"></el-input>
      </li>
    </ul>
    <div class="page" v-for="(item) in table.data" :key="item">
      <ul class="flow-page-header">
        <li>模板名称： {{ item.progressName || '' }} &nbsp; &nbsp; &nbsp; &nbsp; 引用数量： {{ item.fromNumber || 0 }}</li>

        <li>
          <el-tag v-if="item.isDefault" style="margin-right: 10px;">默认</el-tag>
          <el-tag v-if="item.isEnabled" type="warning">已禁用</el-tag>
          <el-tag type="danger" @click="delClick(item.id)">删除</el-tag>
        </li>
      </ul>
      <div class="flow-page">
        <div class="page-col" v-for="(n) in item.progressTasks" :key="n" @click="editTask(n, item.processJson)">
          <div class="page-col-box">
            {{ n.taskName }}
          </div>
          <i class="sicon"></i>
          <i class="eicon"></i>
        </div>
      </div>
    </div>
    <nodeEdit v-model="state.nodeShow" :editData="state.editData" :nodeList="state.nodeList" @onSave="onSave" />
  </div>
</template>

<script setup>
import nodeEdit from '@/page/flow/components/nodeEdit.vue';
import { onActivated, reactive } from "vue";
import { get, post } from '@/api/index';

let router = useRouter();
let params = reactive({
  pageIndex: 1,
  pageSize: 100,
  progressType: 1,
  keyword: ''
});

let state = reactive({
  nodeShow: false,
  editData: [],
  nodeList: []
});

let table = reactive([]);

const pageQuery = async () => {
  let { result } = await post('TemplateProgress/GetPage', params);
  table.data = result.items.map(r => {
    return r
  });
};

const onAdd = () => {
  router.push({
    path: 'flowEdit',
    query: { type: params.progressType }
  });
};

const delClick = (val) => {
  ElMessageBox.confirm(
    '是否确认删除?',
    '删除提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(async () => {
      await get('TemplateProgress/Delete', { id: val });
      pageQuery();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败，联系管理员',
      })
    })
};

const tabChange = async () => {
  await pageQuery()
}

const editTask = (n, processJson) => {
  let nodeList = JSON.parse(processJson)?.nodeList;
  state.nodeList = nodeList.map(r => r.meta).filter(r => ![0, 999].includes(r.taskType));
  state.editData = n;
  state.nodeShow = true;
}

// 处理节点编辑
const onSave = async val => {
  const _params = val
  await post('TemplateProgressTask/Update', _params);
  state.nodeShow = false;
  await pageQuery();
};

onActivated(async () => {
  await pageQuery();
});

</script>

<style lang="scss" scoped>
.flow {
  height: 100%;
  background-color: #fff;
  padding: 10px;

  .page {
    margin-top: 10px;
    border: 1px solid #ebeef5;
  }

  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .flow-page-header {
    width: 100%;
    background-color: #a8ebad;
    display: flex;
    justify-content: space-between;
    height: 36px;
    line-height: 36px;
    padding: 0px 10px;
  }

  .flow-page {
    padding: 20px 20px;
    display: flex;
    flex-grow: 1;
    overflow-x: auto;

    .page-col {
      display: flex;
      margin-right: 20px;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 0;
      flex-shrink: 0;

      cursor: pointer;
      background-color: #409eff;
      text-align: center;
      height: 36px;
      width: 180px;
      line-height: 36px;
      position: relative;
      color: #fff;
      font-size: 15px;
      font-weight: 400;
      white-space: nowrap;

      &:hover {
        &::after {
          width: 100%;
          opacity: 0;
        }
      }

      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: #fff;
        opacity: 0.5;
        transition: all 1.5s;
      }

      .sicon {
        position: absolute;
        right: -20px;
        top: 0;
        transition: all 0.3s;
        border-top: 18px solid #fff;
        border-bottom: 18px solid #fff;
        border-left: 20px solid #409eff;
      }

      .eicon {
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.3s;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 20px solid #fff;
      }

    }
  }

}
</style>
